<template>
  <div>
    <!-- 评论列表 -->
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell
        class="comment-item"
        v-for="(item, index) in commentList"
        :key="index"
      >
        <van-image
          slot="icon"
          class="avatar"
          round
          fit="cover"
          :src="item.aut_photo"
        />
        <div slot="title" class="title-wrap">
          <div class="user-name">{{ item.aut_name }}</div>
          <van-button class="like-btn" icon="good-job-o">{{
            item.like_count > 0 ? item.like_count : '赞'
          }}</van-button>
        </div>

        <div slot="label">
          <p class="comment-content">{{ item.content }}</p>
          <div class="bottom-info">
            <span class="comment-pubdate">{{ item.pubdate | dateFormat }}</span>
            <van-button class="reply-btn" round @click="onreply(item.com_id)"
              >回复 {{ item.reply_count }}</van-button
            >
          </div>
        </div>
      </van-cell>
    </van-list>
    <!-- 回复评论弹出层 -->
    <van-popup
      position="bottom"
      v-model="replyshow"
      :style="{ height: '30%' }"
      closeable
    >
      <replycomment :comId="com_id"></replycomment>
    </van-popup>
  </div>
</template>

<script>
import { getComments } from '@/api/comment'
import replycomment from '@/views/article/components/replycomment.vue'
export default {
  props: ['art_id', 'commentList'],
  // 定义属性
  data() {
    return {
      loading: false, //列表载入动画状态
      finished: false, //列表载入完成状态
      lastid: null, //每次查询的最后一个评论id，用于下一次查询
      replyshow: false, //控制回复评论弹出层
      com_id: null //控制回复的评论id
    }
  },
  components: {
    replycomment
  },
  // 计算属性，会监听依赖属性值随之变化
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    async onLoad() {
      try {
        const params = {
          type: 'a',
          source: this.art_id,
          offset: this.lastid,
          limit: 10
        }
        const res = await getComments(params)
        console.log(res)
        this.$emit('total_count', res.data.data.total_count) //更新总评论数据
        this.commentList.push(...res.data.data.results) // 追加评论数据
        this.loading = false
        // 关闭载入动画
        if (this.commentList.length) {
          this.lastid = res.data.data.last_id // 更新获取下一页数据的页码
        } else {
          this.finished = true // 没有数据了，关闭加载更多
        }
      } catch (err) {
        this.loading = false
      }
    },
    // 回复评论
    onreply(id) {
      this.com_id = id //记录回复评论id
      this.replyshow = true //出现回复评论弹出层
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.onLoad()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {}
}
</script>

<style scoped lang="less">
.comment-item {
  .avatar {
    width: 72px;
    height: 72px;
    margin-right: 25px;
  }
  .title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .user-name {
      color: #406599;
      font-size: 26px;
    }
  }
  .comment-content {
    font-size: 32px;
    color: #222222;
    word-break: break-all;
    text-align: justify;
  }
  .comment-pubdate {
    font-size: 19px;
    color: #222;
    margin-right: 25px;
  }
  .bottom-info {
    display: flex;
    align-items: center;
  }
  .reply-btn {
    width: 140px;
    height: 48px;
    line-height: 48px;
    font-size: 21px;
    color: #222;
  }
  .like-btn {
    height: 30px;
    padding: 0;
    border: none;
    font-size: 19px;
    line-height: 30px;
    margin-right: 7px;
    .van-icon {
      font-size: 30px;
    }
  }
}
</style>
